<!DOCTYPE html>
<html lang="en">

<head>
	<link rel="shortcut icon" href="assets/img/logo.png">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>UR Blog</title>
	<script
		type="text/javascript"> (function () { var css = document.createElement('link'); css.href = 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })(); </script>
	<link rel="stylesheet" href="assets/css/app.css">
	<link rel="stylesheet" href="assets/css/theme.css">
	<link type="text/css" href="css/button.css" rel="stylesheet">
	<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/blog/">
	<link href="assets/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
	<link href="css/person_center.css" rel="stylesheet">
	<style>
		.bd-placeholder-img {
			font-size: 1.125rem;
			text-anchor: middle;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

		@media (min-width: 768px) {
			.bd-placeholder-img-lg {
				font-size: 3.5rem;
			}
		}
	</style>
	<!-- Custom styles for this template -->
	<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet">
	<!-- Custom styles for this template -->
	<link href="css/blog.css" rel="stylesheet">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenLite.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TimelineMax.min.js"></script>
	<script src="js/tools.js"></script>


</head>

<body>

	<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top" style="background-color: black;">
		<a class="navbar-brand font-weight-bolder mr-3" href="index.html"><img src="assets/img/logo.png"
				style="width: 40px; height: 39px;"></a>
		<button class="navbar-light navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault"
			aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarsDefault">
			<ul class="navbar-nav mr-auto align-items-center">
				<form class="bd-search hidden-sm-down">
					<input type="text" class="form-control bg-graylight border-0 font-weight-bold" id="search-input"
						placeholder="Search..." autocomplete="off">
					<div class="dropdown-menu bd-search-results" id="search-results">
					</div>
				</form>
			</ul>
			<ul class="navbar-nav ml-auto align-items-center">
				<li class="nav-item">
					<a class="nav-link active" href="blog_list.html" style="cursor: pointer;">Home</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="blog_edit.html" style="cursor: pointer;">创作</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="person_center.html"><img class="rounded-circle mr-2"
							src="assets/img/av.png" width="30"><span id="user" class="align-middle"></span></a>
				</li>
				<li class="nav-item dropdown">
					<a class="nav-link" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
						aria-expanded="false">
						<svg style="margin-top:10px;" class="_3DJPT" version="1.1" viewbox="0 0 32 32" width="21"
							height="21" aria-hidden="false" data-reactid="71">
							<path
								d="M7 15.5c0 1.9-1.6 3.5-3.5 3.5s-3.5-1.6-3.5-3.5 1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5zm21.5-3.5c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5 3.5-1.6 3.5-3.5-1.6-3.5-3.5-3.5zm-12.5 0c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5 3.5-1.6 3.5-3.5-1.6-3.5-3.5-3.5z"
								data-reactid="22"></path>
						</svg>
					</a>
					<div class="dropdown-menu dropdown-menu-right shadow-lg" aria-labelledby="dropdown02">
						<span class="dropdown-item"><a href="#" onclick="logout()" class="btn btn-primary d-block"
								class="fa fa-download">
								<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
									class="bi bi-door-open-fill" viewBox="0 0 16 16">
									<path
										d="M1.5 15a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1H13V2.5A1.5 1.5 0 0 0 11.5 1H11V.5a.5.5 0 0 0-.57-.495l-7 1A.5.5 0 0 0 3 1.5V15H1.5zM11 2h.5a.5.5 0 0 1 .5.5V15h-1V2zm-2.5 8c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1z" />
								</svg> 登出</a></span>
					</div>
				</li>
			</ul>
		</div>
	</nav>
	<main role="main">
		<div class="jumbotron border-round-0 min-50vh"
			style="background-image:url(assets/images/backgrounds/img-3.jpg); background-size: 50%;">
		</div>
		<div class="container mb-4">
			<img src="assets/img/av.png" class="mt-neg100 mb-4 rounded-circle" width="128">
			<h1 class="font-weight-bold title" id="myu"></h1>
			<p id="myprofile">

			</p>
		</div>

		<div class="container-fluid gradient-border" style="width: 1000px; height: 300px; padding: 0;">
			<div
				style=" width: 1006px; height: 30px; background-color: black; border-top-left-radius: 7px; border-top-right-radius: 7	px; margin-left: -3px;">
				<div style="color: white; margin-left: 15px; font-weight: 600;">我的资料</div>
			</div>
			<div class="container-fluid" style="width: 700px; ">
				<div class="row" style="padding: 5px;">
					<div style="width: 80px; text-align: right; margin-top: 27px;">用户名：</div>
					<input id="username" type="text" class="form-control bg-graylight" autocomplete="off"
						style="width: 200px; border: solid; margin-top: 20px;" disabled="disabled">
					<div class="row" style="height: 40px; margin-top: 20px; margin-left: 0px;">
						<img src="assets/images/edit.png"
							style="width: 20px; height: 20px; margin-top: 10px; margin-left: 5px;cursor: pointer;"
							onclick="alterUn()">
					</div>

				</div>
				<div class="row" style="padding: 5px;">
					<div style="width: 80px; text-align: right; margin-top: 5px;">密码：</div>
					<input id="password" type="text" class="form-control bg-graylight" value="*******"
						autocomplete="off" style="width: 200px; border: solid;" disabled="disabled">
					<img src="assets/images/edit.png"
						style="width: 20px; height: 20px; margin-top: 10px; margin-left: 5px; cursor: pointer;"
						onclick="alterPw()">
				</div>
				<div class="row" style="padding: 5px;">
					<div style="width: 80px; text-align: right; margin-top: 5px;">我的邮箱：</div>
					<input id="email" type="text" class="form-control bg-graylight" placeholder="Search..."
						autocomplete="off" style="width: 200px; border: solid;" disabled="disabled">
					<img src="assets/images/edit.png"
						style="width: 20px; height: 20px; margin-top: 10px; margin-left: 5px; 	cursor: pointer;"
						onclick="alterEmail()">
				</div>
				<div class="row" style="padding: 5px;">
					<div style="width: 80px; text-align: right; margin-left: 350px; margin-top: -145px;">个人简介：</div>
					<textarea rows="9" cols="50" id="profile" type="textarea" class="form-control bg-graylight"
						autocomplete="off" style="width: 300px; border: solid; margin-left: 450px; margin-top: -150px;"
						disabled="disabled">
					</textarea>
					<img src="assets/images/edit.png"
						style="width: 20px; height: 20px; margin-top:-220px; margin-left: 700px;	cursor: pointer;"
						onclick="alterProfile()">
				</div>

			</div>
		</div>
		<div class="row" style="height: 50px;"></div>
		<div class="container-fluid">
			<div class="row">
				<h1 class="font-weight-bold title" style="color:rgb(142, 0, 0);">我的博客：</h1>
			</div>
			<div class="row">
				<div class="card-columns"
					style="width: 1700px; height: 300px; display: flex; border: solid; border-radius: 20px; background-image: url(assets/images/backgrounds/f.jpg);">
					<!-- <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"
						style="width:500px">
						<div class="col p-4 d-flex flex-column position-static">
							<strong class="d-inline-block mb-2 text-primary">World</strong>
							<h4 class="mb-0">第一篇博客</h4>
							<div class="mb-1 text-muted">Nov 12</div>
							<p class="card-text mb-auto">This is a wider card with supporting text below as a
								natural lead-in to additional content.</p>
							<a href="#" class="stretched-link">Continue reading</a>
							<a href="#"></a>
						</div>
						<div class="col-auto d-none d-lg-block">
							<svg class="bd-placeholder-img" width="200" height="250"
								xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"
								focusable="false" role="img" aria-label="Placeholder: Thumbnail">
								<title>Placeholder</title>
								<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%"
									fill="#eceeef" dy=".3em">Thumbnail</text>
							</svg>
						</div>
					</div> -->
				</div>
			</div>
			<div class="row" style="margin-top: 20px;">
				<span style="width: 487px;"></span>
				<a id="te" onclick="firstPage()" style="cursor: pointer;">首页</a>
				<span style="width: 5px"></span>
				<a href="#" id="te" onclick="prePage()" style="cursor: pointer;">上一页</a>
				<span style="width: 5px"></span>
				<a href="#" id="te" onclick="nextPage()" style="cursor: pointer;">下一页</a>
				<span style="width: 5px" onclick="lastPage()"></span>
				<a href="#" id="te" onclick="lastPage()" style="cursor: pointer;">末页</a>
			</div>
	</main>

	<script src="assets/js/app.js"></script>
	<script src="assets/js/theme.js"></script>

	<footer class="footer pt-5 pb-5 text-center">

		<div class="container">

			<div class="socials-media">

				<ul class="list-unstyled">
					<li class="d-inline-block ml-1 mr-1"><a href="#" class="text-dark"><i
								class="fa fa-facebook"></i></a></li>
					<li class="d-inline-block ml-1 mr-1"><a href="#" class="text-dark"><i class="fa fa-twitter"></i></a>
					</li>
					<li class="d-inline-block ml-1 mr-1"><a href="#" class="text-dark"><i
								class="fa fa-instagram"></i></a></li>
					<li class="d-inline-block ml-1 mr-1"><a href="#" class="text-dark"><i
								class="fa fa-google-plus"></i></a></li>
					<li class="d-inline-block ml-1 mr-1"><a href="#" class="text-dark"><i class="fa fa-behance"></i></a>
					</li>
					<li class="d-inline-block ml-1 mr-1"><a href="#" class="text-dark"><i
								class="fa fa-dribbble"></i></a></li>
				</ul>

			</div>

			<!--
              All the links in the footer should remain intact.
              You may remove the links only if you donate:
              https://www.wowthemes.net/freebies-license/
            -->
			<p>© <span class="credits font-weight-bold">
					<a target="_blank" class="text-dark"
						href="https://www.wowthemes.net/pintereso-free-html-bootstrap-template/"><u>UR Blog</u> by RoChes</a>
				</span>
			</p>


		</div>

	</footer>
</body>
<script>
	let artNum = 0;
	var pindex = 1;//当前的页码
	var psize = 3;//每页显示三条

	//初始化分页的参数，从url中获取pindex和psize
	function initPageParam() {
		var pi = getQueryVariable('pindex');
		if (pi != "") {
			pindex = pi;
		}
		var ps = getQueryVariable('psize');
		if (ps != "") {
			psize = ps;
		}
	}
	initPageParam();

	//查询分页数据
	function getList() {
		jQuery.ajax({
			url: '/art/list',
			type: 'get',
			data: {
				"pindex": pindex,
				"psize": psize,
				"state": 1
			},
			success: function (body) {
				if (body.code == 200 && body.data != null && body.data.length > 0) {
					//获取存放博客列表的页
					let container = document.querySelector(".card-columns");
					console.log(body.data);
					let n = 1;
					for (let blog of body.data) {
						//创建博客资料卡
						let blogDiv = document.createElement('div');
						blogDiv.className = "row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative";
						blogDiv.style.marginTop = "20px";
						if (n == 1) {
							blogDiv.style.marginLeft = "20px";
						} else if (n = 3) {
							blogDiv.style.marginRight = "20px";
						}
						//博客左侧信息
						let leftDiv = document.createElement('div');
						leftDiv.className = "col p-4 d-flex flex-column position-static";
						leftDiv.style.opacity = 0.95;
						leftDiv.style.width = "420px";
						leftDiv.style.height = "248px";
						leftDiv.style.backgroundColor = "white";
						leftDiv.style.boxShadow = "10px 10px 5px -4px grey";
						//分类
						let catg = document.createElement('strong');
						catg.className = "d-inline-block mb-2 text-primary";
						catg.style.color = "#ff0000";
						catg.innerHTML = "Blog";
						leftDiv.appendChild(catg);
						//标题
						let title = document.createElement('h4');
						title.className = "mb-0";
						title.innerHTML = blog.title;
						leftDiv.appendChild(title);
						//日期
						let date = document.createElement('div');
						date.className = "mb-1 text-muted";
						date.innerHTML = blog.createtime;
						leftDiv.appendChild(date);
						//内容
						let content = document.createElement('p');
						content.className = "card-text mb-auto";
						content.innerHTML = blog.content;
						leftDiv.appendChild(content);
						//阅读更多
						let more = document.createElement('a');
						more.className = "stretched-link";
						more.href = "blog_detail_incenter.html?blogId=" + blog.id;
						more.innerHTML = "Continue reading"
						leftDiv.appendChild(more);
						//填充
						let sp = document.createElement('a');
						sp.href = "#";
						leftDiv.appendChild(sp);
						//将左侧信息添加到博客资料卡上
						blogDiv.appendChild(leftDiv);
						container.appendChild(blogDiv);
						n += 1;
					}
				}
			}
		})
	}
	getList();
	function getBlogsNum() {
		jQuery.ajax({
			type: 'get',
			url: '/art/getall',
			data: {
				"state": 1
			}, success(body) {
				console.log(body.data);
				artNum = body.data;
			},
			error: function (e) {
				if (e.status == 401) {
					location.href = "login.html";
				}
			}
		});
	}
	getBlogsNum();

	function getUserInfo() {
		jQuery.ajax({
			type: 'get',
			url: '/user/getinfo',
			success: function (body) {
				let username = document.getElementById('user');//导航栏用户名
				let u = document.getElementById('username');//资料卡用户名
				let myu = document.getElementById('myu');
				myu.innerHTML = body.data.username;
				u.value = body.data.username;
				username.innerHTML = body.data.username;
				let profile = document.getElementById('profile');
				let myprofile = document.getElementById('myprofile');
				if (body.data.profile == null) {
					myprofile.innerHTML = "个人简介空空如也~";
					profile.placeholder = "个人简介空空如也~";
				} else {
					myprofile.innerHTML = body.data.profile;
					profile.value = body.data.profile;
				}
				let email = document.getElementById('email');
				if (body.data.email == null) {
					email.placeholder = "请及时绑定邮箱";
				} else {
					email.value = body.data.email
				}
			},
			error: function (e) {
				if (e.status == 401) {
					location.href = "login.html";
				}
			}
		})
	}
	getUserInfo();

	function logout() {
		jQuery.ajax({
			type: 'post',
			url: '/user/logout',
			success: function (body) {
				if (body.data == true) {
					alert("注销成功");
					location.href = "login.html";
				} else {
					alert("系统繁忙，注销失败");
				}
			},
			error: function (body) {
				alert("系统繁忙，注销失败");
			}
		})
	}

	//首页
	function firstPage() {
		location.href = "person_center.html"
	}
	//上一页
	function prePage() {
		if (pindex <= 1) {
			alert("已经是第一页了！");
			return false;
		}
		pindex = parseInt(pindex) - 1;
		location.href = 'person_center.html?pindex==' + pindex + "&psize=" + psize;
	}
	//下一页
	function nextPage() {
		//获取到总共有多少页
		var total = Math.ceil(artNum / psize);
		if (pindex == total) {
			alert("已经是最后一页了");
			return;
		}
		pindex = parseInt(pindex) + 1;
		location.href = 'person_center.html?pindex=' + pindex + "&psize=" + psize;
	}
	//末页
	function lastPage() {
		//获取到总共有多少页
		var total = Math.ceil(artNum / psize);
		location.href = 'person_center.html?pindex=' + total + "&psize=" + psize;
	}
	//跳出修改邮箱信息输入框
	function alterEmail() {
		var email = prompt("请输入你要绑定的邮箱");
		if (email == "") {
			return;
		}
		//校验合法性
		if (!email.includes("@")) {
			alert("输入的邮箱格式不合法");
			return;
		}
		jQuery.ajax({
			type: 'post',
			url: 'user/revise',
			data: {
				"newValue": email,
				"col": "email"
			},
			success(body) {
				alert("修改成功！");
				location.href="person_center.html";
			},
			error(body) {
				alert("服务器繁忙，请稍后再试");
				console.log(body.msg);
			}
		})
	}
	//跳出修改用户名信息输入框
	function alterUn() {
		var username = prompt("请输入你要修改的用户名");
		if (username == "") {
			return;
		}
		jQuery.ajax({
			type: 'post',
			url: 'user/revise',
			data: {
				"newValue": username,
				"col": "username"
			},
			success(body) {
				alert("修改成功！");
				location.href="person_center.html";
			},
			error(body) {
				alert("服务器繁忙，请稍后再试");
				console.log(body.msg);
			}
		})
	}
	//跳出修改密码信息输入框
	function alterPw() {
		var password = prompt("请输入你要修改的密码");
		if (password == "") {
			return;
		}
		jQuery.ajax({
			type: 'post',
			url: 'user/revise',
			data: {
				"newValue": password,
				"col": "password"
			},
			success(body) {
				alert("修改成功！");
				location.href="person_center.html";
			},
			error(body) {
				alert("服务器繁忙，请稍后再试");
				console.log(body.msg);
			}
		})
	}
	//跳出修改个人简介信息输入框
	function alterProfile() {
		var profile = prompt("请输入你要修改的个人简介");
		if (profile == "") {
			return;
		}
		jQuery.ajax({
			type: 'post',
			url: 'user/revise',
			data: {
				"newValue": profile,
				"col": "profile"
			},
			success(body) {
				alert("修改成功！");
				location.href="person_center.html";
			},
			error(body) {
				alert("服务器繁忙，请稍后再试");
				console.log(body.msg);
			}
		});
		let f = document.getElementById('profile');
		f.placeholder = profile;
	}
</script>


</html>